<template>
  <div class="app-container home">
    <el-row justify="space-between" class="notice-bar fs-base">
      <el-col :span="18">{{ notice }}</el-col>
      <el-col :span="4" class="flex-row-center" style="justify-content: right;">
        <el-button type="primary" link>
          更多 <el-icon><DArrowRight /></el-icon>
        </el-button>
      </el-col>
    </el-row>
    <el-row class="mt20" :gutter="20">
      <el-col :span="12">
        <el-card class="tai-card">
          <tai-title title="待收账单(30天)">
            <template #append>
              <el-button size="small" type="primary" :icon="ArrowRightBold" circle />
            </template>
          </tai-title>
          <div class="tai-card-content">
            <div>
              <div class="fs-base fc-regular">{{ billStats.pendingCount }}笔</div>
              <div class="font-w fs-elarge mt10"> {{ billStats.pendingAmount }}元</div>
            </div>
            <div>
              <div class="fs-base fc-warning">已逾期</div>
              <div class="font-w fs-elarge mt10">{{ billStats.overdueAmount }}元</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="tai-card">
          <tai-title title="本月收支">
            <template #append>
              <el-button size="small" type="primary" :icon="ArrowRightBold" circle />
            </template>
          </tai-title>
          <div class="tai-card-content">
            <div>
              <div class="fs-base fc-regular">收入</div>
              <div class="font-w fs-elarge mt10">{{ billStats.monthlyIncome }}元</div>
            </div>
            <div>
              <div class="fs-base fc-regular">支出</div>
              <div class="font-w fs-elarge mt10">{{ billStats.monthlyExpense }}元</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt20" :gutter="20">
      <el-col :span="12">
        <el-card class="tai-card">
          <tai-title title="公寓数据" />
          <div class="tai-card-content">
            <div>
              <div class="fs-elarge font-w">{{ apartmentStats.totalRoomCount }}</div>
              <div class="fs-base mt10">房间</div>
            </div>
            <div>
              <div class="fs-elarge font-w">{{ apartmentStats.emptyRoomCount }}</div>
              <div class="fs-base mt10">空房</div>
            </div>
            <div @click="handlePendingRegister">
              <div class="fs-elarge font-w">{{ apartmentStats.pendingRegisterCount }}</div>
              <div class="fs-base mt10">预登记(待审核)</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="tai-card">
          <tai-title title="智能设备" />
          <div class="tai-card-content">
            <div>
              <div class="fs-elarge font-w">{{ deviceStats.lockCount }}</div>
              <div class="fs-base mt10">智能锁</div>
            </div>
            <div>
              <div class="fs-elarge font-w">{{ deviceStats.lowBatteryLockCount }}</div>
              <div class="fs-base mt10">低电量锁</div>
            </div>
            <div>
              <div class="fs-elarge font-w">{{ deviceStats.collectorCount }}</div>
              <div class="fs-base mt10">采集器</div>
            </div>
            <div>
              <div class="fs-elarge font-w">{{ deviceStats.electricMeterCount }}</div>
              <div class="fs-base mt10">智能电表</div>
            </div>
            <div>
              <div class="fs-elarge font-w">{{ deviceStats.faceLockCount }}</div>
              <div class="fs-base mt10">门禁</div>
            </div>
            <div>
              <div class="fs-elarge font-w">{{ deviceStats.gatewayCount }}</div>
              <div class="fs-base mt10">网关</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt20" :gutter="20">
      <el-col :span="16">
        <el-card class="tai-card">
          <tai-title title="房态图" />
          <el-row class="mt20" :gutter="20">
            <el-col :span="10" align="center">
              <RateEcharts />
            </el-col>
            <el-col :span="1">
              <el-divider direction="vertical" style="height: 100%" />
            </el-col>
            <el-col :span="11">
              <div class="empty-days">
                <div class="title">空置天数</div>
                <div class="content">
                  <div class="empty-item">
                    <div class="item-header">
                      <span class="room-name">10天以内</span>
                      <span class="days">{{ roomStats.vacant10DaysCount || 0 }}间</span>
                    </div>
                    <el-progress 
                      :percentage="calculatePercentage(roomStats.vacant10DaysCount)" 
                      :show-text="false"
                      :stroke-width="10"
                      status="success"
                    />
                  </div>
                  <div class="empty-item">
                    <div class="item-header">
                      <span class="room-name">11-20天</span>
                      <span class="days">{{ roomStats.vacant20DaysCount || 0 }}间</span>
                    </div>
                    <el-progress 
                      :percentage="calculatePercentage(roomStats.vacant20DaysCount)" 
                      :show-text="false"
                      :stroke-width="10"
                    />
                  </div>
                  <div class="empty-item">
                    <div class="item-header">
                      <span class="room-name">21-30天</span>
                      <span class="days">{{ roomStats.vacant30DaysCount || 0 }}间</span>
                    </div>
                    <el-progress 
                      :percentage="calculatePercentage(roomStats.vacant30DaysCount)" 
                      :show-text="false"
                      :stroke-width="10"
                    />
                  </div>
                  <div class="empty-item">
                    <div class="item-header">
                      <span class="room-name">> 30天</span>
                      <span class="days">{{ roomStats.vacantOver30DaysCount || 0 }}间</span>
                    </div>
                    <el-progress 
                      :percentage="calculatePercentage(roomStats.vacantOver30DaysCount)" 
                      :show-text="false"
                      :stroke-width="10"
                      status="warning"
                    />
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <ElectricityStatistics />
      </el-col>
    </el-row>
    <el-row class="mt20">
      <el-col :span="24">
        <ElectricityTrendChart />
      </el-col>
    </el-row>
    <el-row class="mt20">
      <el-col :span="24">
        <el-card class="tai-card">
          <tai-title title="每日数据" />
          <DaysEcharts />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ArrowRightBold, DArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import RateEcharts from './components/RateEcharts.vue'
import DaysEcharts from './components/DaysEcharts.vue'
import ElectricityStatistics from './components/ElectricityStatistics.vue'
import ElectricityTrendChart from './components/ElectricityTrendChart.vue'
import { getBillStatistics, getApartmentStatistics, getDeviceStatistics, getRoomStatistics } from '@/api/statistics'
const router = useRouter()

const notice = ref('【泰寓】最近雨水较多，地板湿滑，请各位家人们注意安全')
const billStats = ref({})
const apartmentStats = ref({})
const deviceStats = ref({})
const roomStats = ref({})

/* 获取账单统计数据 */
function getBillStats() {
  getBillStatistics().then(res => {
    if (res.code === 200) {
      billStats.value = res.data
    }
  })
}

/* 获取公寓统计数据 */
function getApartmentStats() {
  getApartmentStatistics().then(res => {
    if (res.code === 200) {
      apartmentStats.value = res.data
    }
  })
}

/* 获取设备统计数据 */
function getDeviceStats() {
  getDeviceStatistics().then(res => {
    if (res.code === 200) {
      deviceStats.value = res.data
    }
  })
}

/* 获取房态数据 */
function getRoomStats() {
  getRoomStatistics().then(res => {
    if (res.code === 200) {
      roomStats.value = res.data
    }
  })
}

/* 计算百分比 */
function calculatePercentage(count) {
  if (!count || !roomStats.value.totalRoomCount) return 0
  return Math.round((count / roomStats.value.totalRoomCount) * 100)
}

/* 跳转预登记 */
function handlePendingRegister() {
  router.push('/preregister')
}

onMounted(() => {
  getBillStats()
  getApartmentStats()
  getDeviceStats()
  getRoomStats()
})
</script>

<style scoped lang="scss">
.home {
  background-color: #f3f3f3;
  height: 100%;
  .notice-bar {
    background-color: #fff;
    border-radius: 10px;
    padding: 6px 20px;
  }
  .tai-card {
    border-radius: 10px;
    height: 100%;
    &-content {
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      text-align: center;
    }
  }
  .mt20 {
    margin-top: 20px;
  }
}

.empty-days {
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .content {
    .empty-item {
      margin-bottom: 20px;
      
      .item-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        
        .room-name {
          color: var(--el-text-color-regular);
          font-size: 14px;
        }
        
        .days {
          color: var(--el-text-color-secondary);
          font-size: 14px;
        }
      }
      
      :deep(.el-progress-bar__outer) {
        background-color: #f5f5f5;
      }
      
      :deep(.el-progress-bar__inner) {
        transition: all 0.3s;
      }
    }
  }
}
</style>

